<template>
    <div class="yuan-container container">
        <a-card title="追溯链条">
            <div class="filter-panel">
                <div class="filter-list">
                    <a-select @change="searchDiscretion" v-model="searchBarOption.productionType" clearable placeholder="请选择产品大类" style="width: 200px;">
                        <a-select-option v-for="(item,i) in bigKindList" :key="i" :value="item">{{item}}</a-select-option>
                    </a-select>
                </div>
                <div class="filter-list">
                    <a-select @change="searchBatch" v-model="searchBarOption.discretion" clearable placeholder="请选择产品规格" style="width: 200px;">
                        <a-select-option v-for="(item,i) in discretionList" :key="i" :value="item">{{item}}</a-select-option>
                    </a-select>
                </div>
                <div class="filter-list">
                    <a-select show-search :filter-option="filterOption" v-model="searchBarOption.batch" clearable placeholder="请选择产品批号" style="width: 200px;">
                        <a-select-option v-for="(item,i) in batchList" :key="i" :value="item.productBatch">{{item.productBatch}}-{{item.varietyName}}</a-select-option>
                    </a-select>
                </div>
                <div class="filter-list">
                    <a-button @click="searchResult" type="primary">查询</a-button>
                </div>
            </div>
            <div class="container">
                <a-card>
                    <a-steps type="navigation">
                        <a-step status="process" title="成品" description="" />
                        <a-step status="process" title="半成品" description="" />
                        <a-step status="process" title="中药材" description="" />
                        <a-step status="process" title="辅料" description="" />
                    </a-steps>
                </a-card>
            </div>
            <div  class="chain-container">
                <a-spin :spinning="loading">
                    <a-steps v-if="chainData.length" direction="vertical">
                        <a-step status="process" :title="item.type" v-for="(item,i) in chainData" :key="i">
                            <template slot="description">
                                <div class="chain-item">
                                    <div class="chain-item-title">
                                        <div class="chain-item-title-left">
                                            <div class="chain-item-title-left-name">
                                                <span>名称：</span>
                                                <span>{{item.name}}</span>
                                            </div>
                                            <div class="chain-item-title-left-name">
                                                <span>批号：{{item.batch}}</span>
                                            </div>
                                            <div class="chain-item-title-left-name">
                                                <span>{{item.productionTime}}</span>
                                            </div>
                                            <div class="chain-item-title-left-name">
                                                <span>投入量：{{item.productionNum}}{{item.unit}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </a-step>
                    </a-steps>
                    <div v-else>
                        <a-empty description="暂无数据，请根据条件查询"/>
                    </div>
                </a-spin>
            </div>

        </a-card>
    </div>
</template>
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import nextApi from "@/api/nextApi";

@Component({})
export default class extends Vue {
    searchBarOption = {
        batch:void 0,
        discretion:void 0,
        productionType:void 0,
    }
    mounted(){
        this.searchBigKind()
    }
    filterOption(input, option) {
        return (
            option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
    }
    bigKindList: string[] = []
    async searchBigKind(){
        try {
            const res = await nextApi.selectBigKind()
            this.bigKindList = res.data
        } catch (e) {
            console.error('获取大类产品失败', e)
        }
    }
    discretionList: string[] = []
    async searchDiscretion(){
        this.searchBarOption.discretion = void 0
        this.searchBarOption.batch = void 0
        if (!this.searchBarOption.productionType) return;
        try {
            let params = {
                productBigKind: this.searchBarOption.productionType
            }
            const res = await nextApi.selectDiscretion(params)
            this.discretionList = res.data
        } catch (e) {
            console.error('获取产品规格失败', e)
        }
    }
    batchList: string[] = []
    async searchBatch(){
        this.searchBarOption.batch = void 0
        if (!this.searchBarOption.discretion && !this.searchBarOption.productionType) return;
        try {
            let params = {
                productBigKind: this.searchBarOption.productionType,
                discretion: this.searchBarOption.discretion
            }
            const res = await nextApi.selectBatch(params)
            this.batchList = res.data
        } catch (e) {
            console.error('获取产品批号失败', e)
        }
    }
    chainData: any[] = []
    loading = false
    async searchResult(){
        if (!this.searchBarOption.batch) return;
        try {
            this.loading = true
            let params = {
                productBigKind: this.searchBarOption.productionType,
                discretion: this.searchBarOption.discretion,
                batch: this.searchBarOption.batch
            }
            const res = await nextApi.selectChainInfo(params)
            this.chainData = res.data
            this.loading = false
        } catch (e) {
            console.error('获取产品信息失败', e)
        }
    }
}
</script>
<style scoped lang="scss">
//修改a-step样式
::v-deep .ant-steps-item-icon{
    background-color: #00A67DFF !important;
    border-color: #00A67DFF;
}
::v-deep .ant-steps-navigation .ant-steps-item::before{
    background-color: #ffffff !important;
}
    .container{
        padding: 20px;
        .chain-container{
            width: 13%;
            margin:20px auto;
        }
    }
</style>
